<script lang="ts">
import { defineComponent, ref, reactive, watch } from "vue";
import { formatAddress, fromWei } from '@/utils/format';
import { getNewsList } from "@/api"
import { UserModule } from "@/store/modules/user";
import { useRouter } from "vue-router";
import Information from "./Information.vue";

export default defineComponent({
    components: { Information },
    props: {
        teamIndex: {
            type: Number,
            default: 2
        }
    },
    setup(props) {
        const router = useRouter();
        const informationRefs = ref()

        const open = ref(false);
        const setat = reactive({
            pageNum: 0,
            pageSize: 10,
            newsType: 2
        });
        const refreshing = ref(false);
        const loading = ref(true);
        const finished = ref(false);
        const list: any = ref([]);
        const onRefresh = () => {
            open.value = true;
            setat.pageNum = 0;
            finished.value = false;
            loading.value = true;
            refreshing.value = true
            onLoad();
        };
        const onLoad = async () => {
            const res = await getNewsList(setat);
            if (refreshing.value) {
                list.value = [];
                refreshing.value = false;
            }
            list.value = list.value.concat(res.data.data.NewsList || []);
            loading.value = false;
            setat.pageNum++;
            if (list.value.length >= res.data.data.Total) {
                finished.value = true;
            }
        };
        const clickInformation = (item) => {
            if (!item.Website) {
                router.push({ path: '/index', query: { x: 1 } })
                informationRefs.value.show(item, 'layout.EventHotSpots')
            } else {
                window.open(item.Website, '_blank')
            }
        }
        watch(
            () => props.teamIndex,
            (index) => {
                if (index) {
                    setat.newsType = index
                    onRefresh();
                }
            },
            { immediate: true }
        );
        return {
            open,
            list,
            setat,
            refreshing,
            loading,
            finished,
            onRefresh,
            onLoad,
            formatAddress,
            fromWei,
            informationRefs,
            clickInformation
        };
    },
});
</script> 
<template>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('layout.noMore')" @load="onLoad">
            <div class="list">
                <ul>
                    <li v-for="(item, index)  in  list" :key="index" @click="clickInformation(item)">
                        <div target="_blank" rel="noopener noreferrer">
                            <div class="distribution " :class="{ single: item.Images?.split(',').length <= 1 }">
                                <div class="name ">
                                    <div class="van-multi-ellipsis--l2">
                                        {{ item.Title }}</div>
                                    <div class="mark" v-if="item.Images?.split(',').length <= 1">
                                        <!-- <p>{{ item.Author }}</p> -->
                                        <!-- <p><van-icon name="browsing-history-o" />{{ item.ReadCount }}</p> -->
                                        <p><van-icon name="underway-o" />{{ item.NewsTime?.substring(0, 10) }}</p>
                                    </div>
                                </div>
                                <div class="image" v-if="item.Images?.split(',').length <= 1">
                                    <van-image fit="cover" :src="`/upapi/inline/${item.Images?.split(',')[0]}`" />
                                </div>
                                <div class="image" v-else>
                                    <van-image network fit="cover" v-for="(image, i) in item.Images?.split(',')" :key="i"
                                        :src="`/upapi/inline/${image}`" />

                                </div>
                            </div>
                            <div class="mark" v-if="item.Images?.split(',').length > 1">
                                <!-- <p>{{ item.Author }}</p>
                                <p><van-icon name="browsing-history-o" />{{ item.ReadCount }}</p> -->
                                <p><van-icon name="underway-o" />{{ item.NewsTime?.substring(0, 10) }}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </van-list></van-pull-refresh>
    <information ref="informationRefs" />
</template>

<style lang="less" scoped>
.list {
    ul {
        li {
            padding: 12px 0 15px 0;
            border-bottom: 1px solid rgba(237, 239, 242, 1);

            .distribution {
                font-size: 14px;
                font-weight: 400;
                color: #1F2120;
                line-height: 22px;

                &.single {
                    display: flex;
                    justify-content: space-between;

                    .image {
                        margin: 0;
                    }
                }

                .image {
                    margin-top: 8px;
                    display: flex;
                    align-items: center;

                    .van-image {
                        margin-right: 10px;
                        width: 110px;
                        height: 70px;
                        border-radius: 10px;
                        overflow: hidden;

                        &:last-child {
                            margin: 0;
                        }
                    }
                }
            }

            .mark {
                margin-top: 15px;
                display: flex;
                align-items: center;
                font-size: 12px;
                font-weight: 400;
                color: #909399;

                p {
                    margin-right: 12px;
                    display: flex;
                    align-items: center;

                    .van-icon {
                        margin-right: 4px;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
</style>
